<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>三级级联下拉菜单</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<!-- 三级下拉菜单结构 -->
<select id="country">
    <option value="">选择国家</option>
</select>

<select id="province" disabled>
    <option value="">选择省份</option>
</select>

<select id="city" disabled>
    <option value="">选择城市</option>
</select>

<script>
    $(document).ready(function() {
        // 模拟数据（实际开发中应从服务器获取）
        const mockData = {
            countries: [
                { id: 1, name: '中国' },
                { id: 2, name: '美国' }
            ],
            provinces: {
                1: [  // 中国省份
                    { id: 11, name: '北京' },
                    { id: 12, name: '上海' }
                ],
                2: [  // 美国州
                    { id: 21, name: '加利福尼亚' },
                    { id: 22, name: '纽约' }
                ]
            },
            cities: {
                11: [  // 北京城市
                    { id: 111, name: '朝阳区' },
                    { id: 112, name: '海淀区' }
                ],
                12: [  // 上海城市
                    { id: 121, name: '浦东新区' },
                    { id: 122, name: '徐汇区' }
                ],
                21: [  // 加利福尼亚城市
                    { id: 211, name: '洛杉矶' },
                    { id: 212, name: '旧金山' }
                ],
                22: [  // 纽约城市
                    { id: 221, name: '曼哈顿' },
                    { id: 222, name: '布鲁克林' }
                ]
            }
        };

        // 初始化国家列表
        $.each(mockData.countries, function(i, country) {
            $('#country').append($('<option>', {
                value: country.id,
                text: country.name
            }));
        });

        // 国家选择变化事件
        $('#country').change(function() {
            const countryId = $(this).val();
            $('#province, #city').prop('disabled', true).find('option:not(:first)').remove();

            if (countryId) {
                // 模拟AJAX请求省份数据
                $.get(`/api/provinces?country=${countryId}`, function(provinces) {
                    $.each(mockData.provinces[countryId], function(i, province) {
                        $('#province').append($('<option>', {
                            value: province.id,
                            text: province.name
                        }));
                    });
                    $('#province').prop('disabled', false);
                });
            }
        });

        // 省份选择变化事件
        $('#province').change(function() {
            const provinceId = $(this).val();
            $('#city').prop('disabled', true).find('option:not(:first)').remove();

            if (provinceId) {
                // 模拟AJAX请求城市数据
                $.get(`/api/cities?province=${provinceId}`, function(cities) {
                    $.each(mockData.cities[provinceId], function(i, city) {
                        $('#city').append($('<option>', {
                            value: city.id,
                            text: city.name
                        }));
                    });
                    $('#city').prop('disabled', false);
                });
            }
        });
    });
</script>
</body>
</html>